<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <button class="weui-btn weui-btn_primary" v-if="isSign" @click="scan">扫码</button>
    <h1 v-else>无签名！</h1>
    <div class="page">
      <div class="page__hd">
        <h1 class="page__title">List</h1>
        <p class="page__desc">列表</p>
      </div>
      <div class="page__bd">
        <div class="weui-cells__title">带说明的列表项</div>
        <div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <p>标题文字</p>
            </div>
            <div class="weui-cell__ft">说明文字</div>
          </div>
          <div class="weui-cell weui-cell_swiped">
            <div class="weui-cell__bd" style="transform: translateX(-68px);">
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p>标题文字</p>
                </div>
                <div class="weui-cell__ft">说明文字</div>
              </div>
            </div>
            <div class="weui-cell__ft">
              <a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
export default {
  data () {
    return {
      // 是否签名
      isSign: false
    }
  },
  name: 'Home',
  // components: {
  //   HelloWorld
  // },
  created () {
    this.signPage()
    axios.get('http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a')
  },
  methods: {
    /**
     * 签名当前页面=》使用js-sdk
     * 1. 获取签名配置=》调用后台签名接口
     * 2. 使用wx.config方法签名授权
     * 3. wx.ready验证签名是否成功/wx.error签名失败调用
     */
    async signPage () {
      // 调用签名接口
      const { status, data: { data } } = await axios.get('/api/sign', {
        params: {
          signUrl: 'http://localhost:8080/'
        }
      })
      if (status === 200) {
        // 签名
        window.wx.config(
          {
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
          }
        )
        // 验证签名
        window.wx.ready(() => {
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
          // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          // 调用js-sdk功能方法
          console.log('签名成功！')
          this.isSign = true
        })
        window.wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log('签名失败！')
        })
      }
    },
    // 扫码
    scan () {
      window.wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
          console.log(result)
        }
      })
    }
  }
}
</script>

<style>
.btn {
  font-size: 24px;
}
</style>
